<template>
  <div>
    <home-content title="课程详情">
      <h1>产品基数</h1>
      <!-- 课程基本信息区域 -->
      <div class="course-basic">
        <el-row>
          <el-col :span="8">
            <h3>课程难度等级</h3>
          </el-col>
          <el-col :span="16">
            <h3>{{ courseBasic.difficultyLevel }}</h3>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <p class="title">课程时长</p>
          </el-col>
          <el-col :span="16">
            <p>{{ parseInt(courseBasic.duration) }} 小时</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <p class="title">访问量</p>
          </el-col>
          <el-col :span="16">
            <p>{{ courseBasic.visitNum }}</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <p class="title">用户评分</p>
          </el-col>
          <el-col :span="16">
            <p>{{ parseInt(courseBasic.userRating) }}</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <p class="title">学习人数</p>
          </el-col>
          <el-col :span="16">
            <p>{{ courseBasic.userNum }}</p>
          </el-col>
        </el-row>
      </div>
    </home-content>
    <!-- 课程数据区域 -->
    <el-card class="course-charts">
      <h1>课程数据</h1>
      <el-row :gutter="30">
        <el-col :span="12">
          <h3>在线听课人数</h3>
          <chart-area
            v-if="onlineData.onlineList.length > 0"
            :x-data="onlineData.onlineDateList"
            :chart-data="onlineData.onlineList"
            :setheight="400"
            tipName="在线人数"
            type="bar"
          ></chart-area>
        </el-col>
        <el-col :span="12">
          <h3>课程购买数</h3>
          <chart-area
            v-if="buyData.buyList.length > 0"
            :x-data="buyData.buyDateList"
            :chart-data="buyData.buyList"
            :setheight="400"
            tipName="购买量"
          ></chart-area>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <h3>课程访问量</h3>
          <chart-area
            v-if="visiData.visitsList.length > 0"
            :x-data="visiData.visitsDateList"
            :chart-data="visiData.visitsList"
            :setheight="400"
            tipName="访问量"
          ></chart-area>
        </el-col>
        <el-col :span="12">
          <h3>课程学习频次分布</h3>
          <chart-area
            v-if="frequencyData.freList.length > 0"
            :x-data="frequencyData.freDateList"
            :chart-data="frequencyData.freList"
            :setheight="400"
            type="bar"
            :xAxisRotate="true"
            tipName="学习频次"
          ></chart-area>
        </el-col>
      </el-row>
      <!-- 视频列表区域 -->
      <el-row>
        <el-col>
          <el-table
            :header-cell-style="{ 'background-color': '#f2f2f2','font-weight':600,'color':'#686868' }"
            border
            :data="videoList"
          >
            <el-table-column align="center" prop="videoCode" label="课程编号"></el-table-column>
            <el-table-column align="center" prop="videoName" label="视频名称"></el-table-column>
            <el-table-column align="center" prop="duration" label="时长"></el-table-column>
            <el-table-column align="center" prop="studyTime" label="学习次数"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import HomeContent from "@/components/HomeContent.vue";
import ChartArea from "@/components/ChartArea.vue";
import request from "@/utils/request";
import dayjs from "dayjs";
import {
  getBuyList,
  getVisiList,
  getFreData,
  getOnlineData
} from "@/utils/getChartsData";
export default {
  name: "Course",
  components: {
    "home-content": HomeContent,
    "chart-area": ChartArea
  },
  data() {
    return {
      courseBasic: {},
      id: null,
      onlineData: {
        onlineDateList: [],
        onlineList: []
      },
      buyData: {
        buyDateList: [],
        buyList: []
      },
      visiData: {
        visitsDateList: [],
        visitsList: []
      },
      frequencyData: {
        freDateList: [],
        freList: []
      },
      startDate: null,
      endDate: null,
      videoList: []
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.startDate = dayjs()
      .subtract(10, "day")
      .format("YYYY-MM-DD");
    this.endDate = dayjs().format("YYYY-MM-DD");
    this.initCourseBasic();
    this.getBuyData();
    this.getOnlineData();
    this.getvisiData();
    this.getFreData();
    this.getVideoList();
  },
  methods: {
    // 获取课程基本信息
    async initCourseBasic() {
      const { data: res } = await request.get(
        "/course/courseBasic?courseId=" + this.id
      );
      this.courseBasic = res.result;
    },
    // 获取在线人数
    async getOnlineData() {
      const result = await getOnlineData({
        startDate: this.startDate,
        endDate: this.endDate,
        courseId: this.id
      });
      this.onlineData.onlineDateList = result.xlist;
      this.onlineData.onlineList = result.ylist;
    },
    // 获取购买量
    async getBuyData() {
      const result = await getBuyList({
        startDate: this.startDate,
        endDate: this.endDate,
        courseId: this.id
      });
      this.buyData.buyDateList = result.xlist;
      this.buyData.buyList = result.ylist;
    },
    // 获取访问量
    async getvisiData() {
      const result = await getVisiList({
        startDate: this.startDate,
        endDate: this.endDate,
        courseId: this.id
      });
      this.visiData.visitsDateList = result.xlist;
      this.visiData.visitsList = result.ylist;
    },
    // 获取学习频次
    async getFreData() {
      const result = await getFreData({
        startDate: this.startDate,
        endDate: this.endDate
      });
      this.frequencyData.freDateList = result.xlist;
      this.frequencyData.freList = result.ylist;
    },
    async getVideoList() {
      const { data: res } = await request.get("/courseVideo/list", {
        params: {
          pageNo: 1,
          pageSize: 10,
          courseId: this.id
        }
      });
      res.result.content.forEach(item => {
        item.duration = parseInt(item.duration);
      });
      this.videoList = res.result.content;
    }
  }
};
</script>

<style lang="less" scoped>
.course-basic {
  border: 1px solid #e6e6e6;
  height: 230px;
  border-radius: 5px;
  overflow: hidden;
  h3 {
    padding: 0;
    margin: 0;
    text-align: center;
    line-height: 60px;
    background-color: #f2f2f2;
    font-weight: 500;
  }
  .el-col {
    border-bottom: 1px solid #e6e6e6;
    :nth-child(4) {
      border: 0;
    }
  }
  p {
    padding: 0;
    margin: 0;
    text-align: center;
    line-height: 42px;
  }
  .title {
    border-right: 1px solid #e6e6e6;
  }
}
.course-charts {
  margin-top: 40px;
  .el-row {
    margin-bottom: 30px;
    .el-col {
      height: 480px;
      h3 {
        padding: 0;
        margin: 0;
        line-height: 30px;
        font-size: 16px;
        color: #666666ff;
      }
    }
  }
  .el-table {
    border-radius: 5px;
  }
}
</style>